<template>
	<jk-dialog
		v-model="showDialog"
		title="每日产量分析"
		width="1000px"
		append-to-body
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div :style="{ height: `${dialogTableHeight - 20}px`, overflowY: 'auto', overflowX: 'hidden' }">
			<el-tag type="primary" effect="plain" class="margin-bottom-4">
				<span class="el-icon-s-data item-gap"></span>
				<span>图表</span>
			</el-tag>
			<div style="margin-bottom: 14px;">
				<el-row style="background: #f8f8f9;padding: 12px 16px;box-sizing: border-box;border-radius: 16px;" :gutter="10">
					<el-col
						v-for="(item, index) in chartData.processChartDayList"
						:key="index"
						:span="12"
						style="height: 200px;margin: 5px 0;"
					>
						<div style="width: 100%;height: 100%;background: #fff;padding: 10px;box-sizing: border-box;border-radius: 6px;">
							<daily-yield-chart
								:chart-data="item"
							></daily-yield-chart>
						</div>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-tag type="primary" effect="plain" class="margin-bottom-4">
					<span class="el-icon-tickets item-gap"></span>
					<span>列表</span>
				</el-tag>
				<jk-table border :stripe="false" :data="chartData.processLineDayList">
					<vxe-column title="日期" align="center" field="belongDate" :width="100"></vxe-column>
					<vxe-colgroup title="细纱" field="xs" align="center">
						<vxe-column title="实时产量(kg)" align="right" field="reportOutputKg" :min-width="100">
							<template slot-scope="scope">
								<machine-list-popover :process-item="scope.row.xs"></machine-list-popover>
							</template>
						</vxe-column>
						<vxe-column title="称重产量(kg)" align="right" field="weighNetWeight" :min-width="100">
							<template slot-scope="scope">
								<div class="">{{ scope.row.xs.weighNetWeight }}</div>
							</template>
						</vxe-column>
					</vxe-colgroup>
					<vxe-colgroup title="粗纱" field="cs" align="center">
						<vxe-column title="实时产量(kg)" align="right" field="processShiftQty" :min-width="100">
							<template slot-scope="scope">
								<machine-list-popover :process-item="scope.row.cs"></machine-list-popover>
							</template>
						</vxe-column>
						<vxe-column title="称重产量(kg)" align="right" field="processShiftQty" :min-width="100">
							<template slot-scope="scope">
								<div class="">{{ scope.row.cs.weighNetWeight }}</div>
							</template>
						</vxe-column>
					</vxe-colgroup>
					<vxe-colgroup title="并条" field="bt" align="center">
						<vxe-column title="实时产量(kg)" align="right" field="processShiftQty" :min-width="100">
							<template slot-scope="scope">
								<machine-list-popover :process-item="scope.row.bt"></machine-list-popover>
							</template>
						</vxe-column>
					</vxe-colgroup>
					<vxe-colgroup title="梳棉" field="sm" align="center">
						<vxe-column title="实时产量(kg)" align="right" field="processShiftQty" :min-width="100">
							<template slot-scope="scope">
								<machine-list-popover :process-item="scope.row.sm"></machine-list-popover>
							</template>
						</vxe-column>
					</vxe-colgroup>
				</jk-table>
			</div>
		</div>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionProductOrderWeighingRecordItemDayCountByOrderId
    } from '../../../../../api/production/productionMonitor';
    import dailyYieldChart from '../dailyYieldChart';
    import machineListPopover from './machine-list-popover';
    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        components: {
            machineListPopover,
            dailyYieldChart
        },
        data() {
            return {
                machineList: [],
                chartData: {
                    processChartDayList: [],
                    processLineDayList: []
                },
                showDialog: false
            };
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getChartData() {
                if (this.dataItem.id) {
                    return productionProductOrderWeighingRecordItemDayCountByOrderId({
                        productOrderId: this.dataItem.id
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.chartData = res.data.res ? JSON.parse(JSON.stringify(res.data.res)) : {};
                            console.log(this.chartData);
                            this.$nextTick(() => {
                                this.calDialogViewHeight();
                            });
                        }
                    });
                }
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getChartData();
                }
            },
            dataItem: {
                handler(newVal) {
                },
                deep: true
            }
        }
    };
</script>
